<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { postJbfaTable } from "@/api/table";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";

const city = window.globalObj.name;

const tableData = ref([]);
const tableData1 = ref([]);

const editorRef10 = shallowRef();
const valueHtml10 = ref("交通运力能力需求");
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref("交通运力扩编车辆需求清单");
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};
const editorRef12 = shallowRef();
const valueHtml12 =
  ref(`空情预警信息系统能力标准：各级人防指挥所均应接入空情预警信息系统，达到实时接收空情预警情报的标准，应接入的空情预警信息系统共###套，其中市本级###套，各县（区）共###套。
空情预警信息系统能力需求：需要补充建设或平战转换引接系统的指挥所共###个，各县（区）各1套。
警报系统能力标准：接入国家、省、市、县（区）四级人防警报统控网，实现警报多级统控发放，主城区覆盖率达到100%。
警报系统能力需求：警报覆盖率满足建设要求。`);
const toolbarConfig12 = {};
const editorConfig12 = { placeholder: "请输入内容..." };
const mode12 = ref("default");
const handleCreated12 = (editor) => {
  editorRef12.value = editor; // 记录 editor 实例，重要！
};
const editorRef13 = shallowRef();
const valueHtml13 = ref("医疗救护");
const toolbarConfig13 = {};
const editorConfig13 = { placeholder: "请输入内容..." };
const mode13 = ref("default");
const handleCreated13 = (editor) => {
  editorRef13.value = editor; // 记录 editor 实例，重要！
};
const editorRef14 = shallowRef();
const valueHtml14 = ref("医护人员增配需求清单");
const toolbarConfig14 = {};
const editorConfig14 = { placeholder: "请输入内容..." };
const mode14 = ref("default");
const handleCreated14 = (editor) => {
  editorRef14.value = editor; // 记录 editor 实例，重要！
};

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

// 合计占2单元格
const spanMethod = ({ row, column, rowIndex, columnIndex, length }) => {
  if (columnIndex === 0) {
    if (length > 1 && rowIndex === length - 1 && row.jd_name === "合计") {
      return {
        display: "none",
      };
    }
  } else if (columnIndex === 1) {
    if (row.jd_name === "合计") return [1, 2];
  }
};

// 交通运力需求标准一览表
const xqList = ref([]);
const getXqData = () => {
  return postJbfaTable("jtylxqbzylbList").then((res) => {
    if (res.code === 200) {
      xqList.value = res?.data || [];
    }
  });
};
// 交通运力扩编车辆需求清单
// const kbList = ref([]);
// const getKbData = () => {
//   return postJbfaTable("jtylkbclxqqdList").then((res) => {
//     if (res.code === 200) {
//       kbList.value = res?.data || [];
//     }
//   });
// };

// 医护人员配备标准一览表
const yhbzList = ref([]);
const getYhbzData = () => {
  return postJbfaTable("yhrypbbzList").then((res) => {
    if (res.code === 200) {
      yhbzList.value = res?.data || [];
    }
  });
};
// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "能力需求-人员防护行动能力需求" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml10.value = data.find((x) => x.k === "交通运力能力需求")?.v || "";
    valueHtml11.value =
      data.find((x) => x.k === "交通运力扩编车辆需求清单")?.v || "";
    valueHtml12.value = data.find((x) => x.k === "预警报知")?.v || "";
    valueHtml13.value = data.find((x) => x.k === "医疗救护")?.v || "";
    valueHtml14.value =
      data.find((x) => x.k === "医护人员增配需求清单")?.v || "";
  });
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "能力需求-人员防护行动能力需求",
      data: [
        {
          k: "交通运力能力需求",
          v: valueHtml10.value,
        },
        {
          k: "交通运力扩编车辆需求清单",
          v: valueHtml11.value,
        },
        {
          k: "预警报知",
          v: valueHtml12.value,
        },
        {
          k: "医疗救护",
          v: valueHtml13.value,
        },
        {
          k: "医护人员增配需求清单",
          v: valueHtml14.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(async () => {
  initHtml();
  await getXqData();
  await getYhbzData();
});

onBeforeUnmount(() => {
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
  if (editorRef12.value) editorRef12.value.destroy();
  if (editorRef13.value) editorRef13.value.destroy();
  if (editorRef14.value) editorRef14.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="交通运力能力需求" class="top-15" />
    <!-- <div top-15 zddj>
      能力标准：按疏散城市人口30.0%、每人携带物品20.0kg计算，共运送人员XX人、货物XX吨，按食品随身携带，货车以运送行李为主的原则，共需普通客车XX台次、货车XX台次。具体情况如下：
    </div> -->
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>
    <div class="top-15 zddj text-center">
      {{ city }}交通运力需求标准一览表（单位:台次）
    </div>
    <el-table
      id="table"
      :data="xqList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      max-height="500"
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区域" />
      <el-table-column prop="data2" label="需要普通客车数量" />
      <el-table-column prop="data3" label="需要货车数量" />
    </el-table>

    <!-- <div top-15 zddj>
      能力需求：按需求量等于标准量与现有量的差值计算，共需要扩编普通客车XX台次、货车XX台次。具体情况如下：
    </div> -->
    <div class="top-15 zddj text-center">
      {{ city }}交通运力扩编车辆需求清单
    </div>
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>

    <FirstTitle name="预警报知" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef12"
        :defaultConfig="toolbarConfig12"
        :mode="mode12"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml12"
        :defaultConfig="editorConfig12"
        :mode="mode12"
        @onCreated="handleCreated12"
      />
    </div>

    <FirstTitle name="医疗救护" class="top-15" />
    <!--   <div top-15 zddj>
      能力标准：医护人员配备标准按预计城市人员受伤比例3.0%，其中，重伤人口比例30.0%，轻伤人口比例70.0%，轻伤人员与医护人员比例标准为8，重伤人员与医护人员比例标准为3，预计需要医护人员数量XX。具体情况如下：
    </div> -->
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef13"
        :defaultConfig="toolbarConfig13"
        :mode="mode13"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml13"
        :defaultConfig="editorConfig13"
        :mode="mode13"
        @onCreated="handleCreated13"
      />
    </div>
    <div class="top-15 zddj text-center">{{ city }}医护人员配备标准一览表</div>
    <el-table
      id="table"
      :data="yhbzList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
      max-height="500"
    >
      <el-table-column prop="data0" label="序号" width="60" align="center" />
      <el-table-column prop="data1" label="行政区域" />
      <el-table-column prop="data2" label="城市人口（万人）" />
      <el-table-column prop="data3" label="预计受伤比例（%）" />
      <el-table-column prop="data4" label="受伤（人）" />
      <el-table-column prop="data5" label="预计重伤比例（%）" />
      <el-table-column prop="data6" label="重伤（人）" />
      <el-table-column prop="data7" label="预计轻伤比例（%）" />
      <el-table-column prop="data8" label="轻伤（人" />
      <el-table-column prop="data9" label="重伤与医护比" />
      <el-table-column prop="data10" label="轻伤与医护比" />
      <el-table-column prop="data11" label="需要医护人数" />
    </el-table>

    <!-- <div top-15 zddj>能力需求：共需增加配备医护人员XX人。具体情况如下：</div> -->
    <div class="top-15 zddj text-center">{{ city }}医护人员增配需求清单</div>
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef14"
        :defaultConfig="toolbarConfig14"
        :mode="mode14"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml14"
        :defaultConfig="editorConfig14"
        :mode="mode14"
        @onCreated="handleCreated14"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>